<template>
    <el-container>
        <el-container class="is-vertical">
            <el-header>
                <div class="left-panel">
                    <el-button type="primary" icon="el-icon-plus" @click="table_add" v-if="permission.add">增加</el-button>
                    <!-- <el-button v-if="permission.delete" type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del">批量删除</el-button>
                    <el-button v-if="permission.delete" type="danger" plain icon="el-icon-delete" @click="deleteAll">清空所有记录</el-button> -->
                </div>
            </el-header>
            <div class="panel-search-box">
                <div class="panel-search">
                    <el-input v-model="search.title" placeholder="标题" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                </div>
            </div>
            <el-main class="nopadding">
                <scTable ref="table" :apiObj="$API.message.list" :params="search" remoteSort @selection-change="selectionChange">
                    <el-table-column label="标题" prop="title" align="left" width="250" show-overflow-tooltip></el-table-column>
                    <el-table-column label="内容" prop="abstract" show-overflow-tooltip align="center">
                        <template #default="scope">
                            <div v-html="scope.row.abstract"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="发送时间" prop="createTime" width="200" align="center"></el-table-column>
                    <el-table-column label="状态" align="center" prop="status" width="70">
                        <template #default="scope">
                            <el-tag size="mini" type="success" v-if="scope.row.status.value == 2">{{scope.row.status.name}}</el-tag>
                            <el-tag size="mini" type="info" v-else>{{scope.row.status.name}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="right" width="140">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                            <el-divider direction="vertical" v-if="permission.delete"></el-divider>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button type="text" size="small" v-if="permission.delete">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>

    <detail v-if="dialog.detail" ref="detailDialog"></detail>

    <send v-if="dialog.send" ref="sendDialog" @success="handleSuccess"></send>
</template>

<script>
import detail from './detail'
import send from './send'
import { rolePermission } from '@/utils/permission'
export default {
    name: 'message',
    components: {
        send,
        detail
    },
    data() {
        return {
            dialog: {
                send: false,
                detail: false
            },
            selection: [],
            search: {
                title: null
            },
            permission: {
				add: rolePermission('system-message-add'),
				delete: rolePermission('system-message-delete'),
			},
        }
    },
    methods: {
        // 搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        // 增加
        table_add() {
            this.dialog.send = true
            this.$nextTick(() => {
                this.$refs.sendDialog.open()
            })
        },
        //查看
        async table_show(row) {
            this.dialog.detail = true
            this.$nextTick(() => {
                this.$refs.detailDialog.open().setData(row)
            })
        },
        //删除
        async table_del(row, index) {
            let req = {
                id: row.id
            }
            var res = await this.$API.message.action.delete(req);
            if (res.error == 0) {
                this.$notify.success("删除成功")
                this.$refs.table.refresh()
            }
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        //批量删除
        batch_del() {
            this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                type: 'warning'
            }).then(async () => {
                // const loading = this.$loading();
                let idsArr = this.selection.map(item => {
                    return item.id
                })
                let req = {
                    ids: idsArr
                }
                var res = await this.$API.message.action.delete(req);
                if (res.error == 0) {
                    this.$notify.success("删除成功")
                    //loading.close();
                    this.$refs.table.refresh()
                } 
            }).catch(() => {

            })
        },
        deleteAll() {
            this.$prompt(`确定要清空所有的消息记录吗？`, '清空记录', {
                type: 'warning',
                inputPlaceholder: '如果确认操作,请手动输入‘清空记录’',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        if (instance.inputValue !== '清空记录') {
                            instance.validateError = true
                            instance.editorErrorMessage = '验证错误，请手动输入‘清空记录’'
                            return false
                        }
                        instance.confirmButtonLoading = true
                        instance.confirmButtonText = '正在清空...'
                        
                        try {
                            await this.$API.message.all.delete({ids: []}).then(res => {
                                if (res.error === 0) {
                                    done()
                                    setTimeout(() => {
                                        instance.confirmButtonLoading = false
                                        instance.confirmButtonText = '确定'
                                    }, 300)
                                }
                            })
                        } catch (error) {
                            instance.confirmButtonLoading = false
                            instance.confirmButtonText = '确定'
                        }
                    } else {
                        done()
                    }
                },
            }).then(() => {
                this.$notify.success("清空数据成功")
                this.$refs.table.refresh()
            }).catch(() => {

            })
        },
        //本地更新数据
        handleSuccess() {
            this.$refs.table.refresh()
        }
    }
}
</script>

<style>
</style>
